<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Using globalToLocal #1</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<!-- Note: All core EaselJS classes are listed here: -->

	<script src="../lib/easeljs-NEXT.combined.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;

	var _mouseIsDown;
	var _mouseX;
	var _mouseY;

	var spin1;		// nested invisble container to generate a spirograph effect
	var spin2;		// nested invisble container to generate a spirograph effect

	var shape;		// drawing shape
	var color;		// drawing color
	var lastPt;		// last draw position
	var text;
	var graphics;
	var count = 0;

	function init() {
		// create a new stage and point it at our canvas:
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// attach mouse handlers directly to the source canvas
		// better than calling from canvas tag for cross browser

		stage.enableDOMEvents(true);
		stage.addEventListener("stagemousemove", mouseMove);
		stage.addEventListener("stagemousedown", mouseDown);
		stage.addEventListener("stagemouseup", mouseUp);

		text = new createjs.Text("Click and Drag", "36px Arial", "#777777");
		text.x = 360;
		text.y = 200;
		stage.addChild(text);

		// shape to draw vector data into:
		shape = new createjs.Shape();
		shape.x = 41;		//position in parent container
		graphics = shape.graphics;

		// middle spinner:
		spin2 = new createjs.Container();
		spin2.addChild(shape);
		spin2.x = 303;		//position in parent container

		// outside spinner:
		spin1 = new createjs.Container();
		spin1.addChild(spin2);

		// center it on the stage:
		spin1.x = canvas.width / 2;
		spin1.y = canvas.height / 2;
		stage.addChild(spin1);

		// start the tick and point it at the window so we can do some work before updating the stage:
		createjs.Ticker.setFPS(30);
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		// update rotation:
		spin1.rotation += 10;
		spin2.rotation += -7;
		shape.rotation += 3;

		if (_mouseIsDown) {
			var color = createjs.Graphics.getHSL(
							Math.cos((count++) * 0.01) * 180,
							100,
							50,
							1.0);

			// set up our drawing properties:
			graphics.setStrokeStyle(Math.random() * 20 + 2, "round").beginStroke(color);

			// start the line at the last position:
			graphics.moveTo(lastPt.x, lastPt.y);

			// calculate the new position in the shape's local coordinate space:
			lastPt = shape.globalToLocal(_mouseX, _mouseY);

			// draw the line, and close the path:
			graphics.lineTo(lastPt.x, lastPt.y);
		}

		// update the stage:
		stage.update(event);
	}

	//start drawing
	function mouseDown(event) {
		//if(!e){ e = window.event; }
		stage.removeChild(text);
		_mouseIsDown = true;

		// set up the first point in the new draw, and choose a random color:
		lastPt = shape.globalToLocal(event.nativeEvent.pageX - canvas.offsetLeft, event.nativeEvent.pageY - canvas.offsetTop);
		//color = "#"+(Math.random()*0xFFFFFF|0).toString(16);

		// clear the cache, so the vector data is drawn each tick:
		shape.uncache();
	}

	//stop drawing
	function mouseUp() {
		_mouseIsDown = false;

		// cache the vector data to a saved canvas, so we don't have to render it each tick:
		shape.cache(-800, -800, 1600, 1600);
	}

	//update mouse positions
	function mouseMove(e) {
		//if(!e){ e = window.event; }
		_mouseX = e.nativeEvent.pageX - canvas.offsetLeft;
		_mouseY = e.nativeEvent.pageY - canvas.offsetTop;
	}

</script>
</head>

<body onload="init();">
<header class="EaselJS">
	<h1>GlobalToLocal</h1>

	<p>Example of <code>DisplayObject.globalToLocal()</code> and <code>DisplayObject.cache()</code>
		usage. Click to begin drawing. If you draw a large number of line
		segments, the animation will start to slow down or stutter due to the
		amount of vector data being rendered each tick. When you release the
		mouse, the vector Shape is cached, and it will animate quickly again.
		When you click again, it will turn off caching in order to draw new line
		segments.
	</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
